<template>
  <el-dialog
    :draggable="true"
    :destroy-on-close="true"
    v-model="dialogVisible"
    :title="dailogProps?.title"
    width="500"
    :before-close="handleClose"
  >
    <el-form
      ref="ruleFormRef"
      label-width="100px"
      label-suffix=" :"
      :rules="rules"
      :disabled="dailogProps.isView"
      :model="dailogProps.row"
      :hide-required-asterisk="dailogProps.isView"
    >
      <el-form-item label="用户姓名" prop="username">
        <el-input v-model="dailogProps.row!.username" placeholder="请填写用户姓名" clearable></el-input>
      </el-form-item>
      <el-form-item label="性别" prop="gender">
        <el-select v-model="dailogProps.row!.gender" placeholder="请选择性别" clearable>
          <el-option v-for="item in genderType" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="身份证号" prop="idCard">
        <el-input v-model="dailogProps.row!.idCard" placeholder="请填写身份证号" clearable></el-input>
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="dailogProps.row!.email" placeholder="请填写邮箱" clearable></el-input>
      </el-form-item>
      <el-form-item label="居住地址" prop="address">
        <el-input v-model="dailogProps.row!.address" placeholder="请填写居住地址" clearable></el-input>
      </el-form-item>
    </el-form>
    <el-button @click="handlerAdd">计数器</el-button>
    <div>{{ props.count }}</div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">Cancel</el-button>
        <el-button type="primary" @click="goToHandlerData"> Confirm </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from "vue";
import { ElMessageBox } from "element-plus";
import { genderType } from "@/utils/serviceDict";
import { User } from "@/api/interface";

interface DailogProps {
  title: string;
  isView: boolean;
  row: Partial<User.ResUserList>;
}
const props = withDefaults(
  defineProps<{
    count?: number;
    msg?: string;
  }>(),
  {
    count: 0,
    msg: "hello"
  }
);

interface HandlerEmits {
  (e: "update:count", value: number): void;
}
const emit = defineEmits<HandlerEmits>();
const handlerAdd = () => {
  let needSubCount = props.count + 1;
  emit("update:count", needSubCount);
};

onMounted(() => {
  console.log("props>>>弹窗的onMounted", props);
});

const rules = reactive({
  username: [{ required: false, message: "请填写用户姓名" }],
  gender: [{ required: true, message: "请选择性别" }],
  idCard: [{ required: true, message: "请填写身份证号" }],
  email: [{ required: true, message: "请填写邮箱" }],
  address: [{ required: true, message: "请填写居住地址" }]
});

const dialogVisible = ref(false);
const dailogProps = ref<DailogProps>({
  isView: false,
  title: "",
  row: {}
});
const acceptParams = (params: DailogProps) => {
  console.log("接受父组件的参数", params);
  dialogVisible.value = true;
  dailogProps.value = params;
};

const handleClose = (done: () => void) => {
  ElMessageBox.confirm("Are you sure to close this dialog?")
    .then(() => {
      done();
    })
    .catch(() => {
      // catch error
    });
};

const goToHandlerData = () => {
  console.log("dailogProps", dailogProps.value.row);
};

defineExpose({
  acceptParams
});
</script>
